<template>
  <div
    class="tag-setting-input"
    :class="[className]">
    <div
      class="tag-setting-input__input"
      :class="{'placeholder': !inputVal}"
      @click="inputClick">
      <div
        :title="inputVal"
        class="text">
        {{ inputVal ? inputVal : $t('请选择标签') }}
      </div>
      <div
        @click.stop="clear"
        v-if="showClearBtn"
        class="right-icon">
        <i class="el-icon-circle-close" />
      </div>
      <div
        v-else
        class="right-icon">
        <i class="el-icon-arrow-down" />
      </div>
    </div>

    <tag-setting-dialog
      :disable-inner-tags="disableInnerTags"
      ref="tagSettingDialog"
      />
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapGetters }  = createNamespacedHelpers('media')

import TagSettingDialog from './TagSettingDialog'

export default {
  components: {
    TagSettingDialog
  },
  name: 'tag-setting-input',
  props: {
    tagId: {
      type: Array,
      default() {
        return []
      }
    },
    innerTags: {
      type: Array,
      default() {
        return []
      }
    },
    className: {
      type: String,
      default: ''
    },
    clearable: {
      type: Boolean,
      default: false
    },
    disableInnerTags: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapGetters(['dynTagTree']),
    inputVal() {
      const tagIdNames = this.tagId.map(v => {
        const name = this.getNameByValue(v, this.dynTagTree)
        return name ? name : v
      })

      const innerTagNames = this.innerTags.map(v => {
        return v.innerTagLabel
      })

      return [...tagIdNames, ...innerTagNames].join(',')
    },
    showClearBtn() {
      return this.clearable && this.inputVal
    }
  },
  methods: {
    clear() {
      console.log('clear')
      this.$emit('update:tagId', [])
      this.$emit('update:innerTags', [])
    },
    // 根据value值获取普通标签名
    getNameByValue(value, arr) {
      const _v = String(value)
      let findName
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].id === _v) {
          return arr[i].name
        } else if (arr[i].children && arr[i].children.length > 0) {
          const res = this.getNameByValue(value, arr[i].children)
          if (res) return res
          continue
        } else {
          continue
        }
      }
    },
    inputClick() {
      this.$refs.tagSettingDialog.show({
        tagId: this.tagId,
        innerTag: this.innerTags,
        okCb: ({tagId, innerTag}) => {
          console.log('tagId',tagId)
          this.$emit('update:tagId', tagId)
          this.$emit('update:innerTags', innerTag)
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.tag-setting-input {
  width: 100%;
  &__input {
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    min-height: 32px;
    line-height: 32px;
    padding-left: 15px;
    padding-right: 30px;
    font-size: 12px;
    color: #606266;

    .text {
      width: calc(100% - 10px);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  &__input.placeholder {
    color: #e9e9e9;
  }
  .right-icon {
    position: absolute;
    right: 8px;
    top: 0;
    height: 100%;
    color: #ccc;
    font-size: 14px;
    i {
      line-height: 32px;
      width: 25px;
      text-align: center;
    }
  }
}
</style>